<!--  搜索页面    -->
<template>
  <div class="search">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      @search="onSearch"
      @cancel="$router.back()"
      shape="round"
      placeholder="请输入搜索关键词"
    />
    <!-- 下拉选项栏 -->
    <Dropmenu
      v-if="categoryArr.length != 0"
      :categoryList="categoryArr"
      @changePrice="changePrice"
      @changeKind="changeKind"
    ></Dropmenu>
    <!-- 产品列表 -->
    <ProductList :goodListArr="goodsList" @click="gotoDetailFn()"></ProductList>
  </div>
</template>

<script>
//引入axios请求  按需导出需要加{}
import { getSearchList } from "@/utils/http.js";
//引入 产品列表组件   默认导出不需要{}
import ProductList from "@/components/Search-ProductList";
//引入下拉菜单    默认导出不需要{}
import Dropmenu from "@/components/Dropmenu";

export default {
  created() {
    //组件初始化获取商品列表
    this.getListData();
  },
  methods: {
    //封装数据请求函数
    getListData() {
      let params = {
        keyword: this.value,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      };
      getSearchList(params).then((res) => {
        // console.log(res);
        this.goodsList = res.data.data.goodsList;
        this.categoryArr = res.data.data.filterCategory;
        //将filterCategory中的字段 name =>text,将 id=>value字段
        // 1.将数组filterCategory转成字符串
        let filterStr = JSON.stringify(this.categoryArr);
        this.categoryArr = JSON.parse(
          filterStr.replace(/name/g, "text").replace(/id/g, "value")
        );
      });
    },
    //搜索框事件
    onSearch(val) {
      this.value = val;
      this.getListData();
    },

    // 下拉菜单事件
    //参数n就是子组件通过$emit传递过来的参数
    //价格选项
    changePrice(n) {
      //   console.log(n);
      this.sort = "price";

      this.order = n;
      console.log(this.order);
      this.getListData();
    },
    //分类选项
    changeKind(n) {
      this.categoryId = n;
      this.getListData();
    },
  },
  //注册‘商品列表和下拉菜单’组件
  components: { ProductList, Dropmenu },

  data() {
    return {
      goodsList: "", //数据请求到的产品列表
      value: "", //搜索框value
      keyword: "", //搜索关键字
      page: 1, //显示页数
      size: 20, //一页显示个数
      order: "", //排列顺序，desc表示价格由高到低，asc表示价格由低到高
      categoryId: 0, //类别id，代表下拉菜单中的全部、居家等选项
      categoryArr: [], //类别数组
      sort: "id", //id按类或price按价格
      params: {}, //搜索页请求数据的参数
    };
  },
};
</script>

<style>
</style>